<script setup>
import { computed } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import { useUserStore } from './stores/user'
import NavBar from './components/NavBar.vue'

const userStore = useUserStore()

// 自动获取用户状态（页面刷新时保持登录状态）
userStore.fetchUser().catch(() => {})

// 计算属性用于响应式显示用户状态
const isAuthenticated = computed(() => userStore.isAuthenticated)
const username = computed(() => userStore.user?.name || 'Guest')
</script>

<template>
  <div class="app-container">
    <NavBar :is-authenticated="isAuthenticated" :username="username" />
    
    <main class="main-content">
      <RouterView v-slot="{ Component }">
        <template v-if="Component">
          <Suspense>
            <component :is="Component" />
            
            <template #fallback>
              <div class="global-loading">
                <div class="spinner"></div>
                Loading page...
              </div>
            </template>
          </Suspense>
        </template>
      </RouterView>
    </main>

    <footer class="app-footer">
      <p>© 2024 Demo App. Environment: {{ $import.meta.env.MODE }}</p>
    </footer>
  </div>
</template>

<style>
/* 全局样式 */
:root {
  --primary-color: #2c3e50;
  --secondary-color: #42b983;
  --error-color: #e74c3c;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.global-loading {
  text-align: center;
  padding: 2rem;
  color: var(--primary-color);
}

.spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 0.25rem solid rgba(0, 0, 0, 0.1);
  border-left-color: var(--secondary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

.app-footer {
  background: #f8f9fa;
  padding: 1rem;
  text-align: center;
  margin-top: auto;
  border-top: 1px solid #eee;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    padding: 1rem;
  }
}
</style>